import * as React from "react";
import moment from "moment";
import { Modal, Form, Input, DatePicker } from "antd";
import { updateProject } from "../../../ServeApi";
import { AjaxData } from "../../../../../../data/interface/publicInterface";
const DatePickers:any= DatePicker;
export interface EditModalProps {
  visible: boolean;
  value: any;
  onOk: () => any;
  onCancel: () => any;
}

export interface EditModalState {
  visible: boolean;
}
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
    md: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
    md: { span: 16 },
  },
};
interface preamData {
  id: string;
  authDate: number;
  isDel: string;
  name: string;
  subName: string;
}
interface FromData {
  authDate: any;
  name: string;
  subName: string;
}
class EditModal extends React.Component<EditModalProps, EditModalState> {
  state = {
    visible: false,
  };
  formRef: any = null;
  /**钩子函数 */
  shouldComponentUpdate(np: EditModalProps, ns: EditModalState) {
    if (np.visible !== this.props.visible) {
      this.setState({
        visible: np.visible,
      });
      setTimeout(() => {
        this.editFromData(np.value);
      }, 30);
    }
    return true;
  }
  /**操作 */
  //确认提交
  handleOk() {
    // this.props.onOk();
    this.onSubmit();
  }
  //取消
  handleCancel() {
    this.props.onCancel();
    this.clearFromData();
  }
  //提交校验
  onSubmit = () => {
    const container: any = (this.formRef as any) as HTMLDivElement;
    container
      .validateFields()
      .then((res: FromData) => {
        let pream: preamData = {
          id: this.props.value.id,
          authDate: res.authDate.valueOf(),
          isDel: "0",
          name: res.name,
          subName: res.subName,
        };
        // console.log(pream);
        this.updateProject(pream);
      })
      .catch((err) => {
        console.log(err);
      });
  };
  //填充表单
  editFromData(item) {
    if (this.formRef) {
      const container: any = (this.formRef as any) as HTMLDivElement;
      container.setFieldsValue({
        authDate: moment(item.authDate),
        name: item.name,
        subName: item.subName,
      });
    }
  }
  //清空表单
  clearFromData() {
    if (this.formRef) {
      const container: any = (this.formRef as any) as HTMLDivElement;
      container.setFieldsValue({
        name: undefined,
        subName: undefined,
        authDate: undefined,
      });
    }
  }
  //校验确认密码
  handleCfmPwd(rules, value, callback) {
    if (this.formRef.getFieldValue("pwd") !== value) {
      callback(new Error("两次密码输入不一致"));
    } else {
      callback();
    }
  }
  /**数据请求 */
  async updateProject(pream: preamData) {
    let res: any = await updateProject(JSON.stringify(pream));
    let json: AjaxData = res;
    if (json.success) {
      this.props.onOk();
      this.clearFromData();
    }
  }
  render() {
    let { visible } = this.state;
    return (
      <>
        <Modal
          title="项目管理"
          visible={visible}
          okText="确认"
          cancelText="取消"
          onOk={() => {
            this.handleOk();
          }}
          onCancel={() => {
            this.handleCancel();
          }}
        >
          <Form {...formItemLayout} ref={(el) => (this.formRef = el)}>
            <Form.Item
              label="项目名称"
              name="name"
              rules={[
                {
                  required: true,
                  message: "请填写项目名称",
                },
              ]}
            >
              <Input placeholder="项目名称" />
            </Form.Item>
            <Form.Item label="简称" name="subName">
              <Input placeholder="简称" />
            </Form.Item>
            <Form.Item label="授权到期日期" name="authDate">
              <DatePickers placeholder="授权到期日期" />
            </Form.Item>
          </Form>
        </Modal>
      </>
    );
  }
}

export default EditModal;
